<style lang='less'>
  .bench_search {
    margin-top: 2%;
  }
  .backContent {
    background-color: #f7f7f7;
    height: 100px;
    line-height: 100px;
  }
  .centerContent {
    height: 50px;
    line-height: 50px;
    padding-left: 5px;
  }
  .footerContent {
    height: auto;
    background-color: #f7f7f7;
    padding: 25px;
  }
</style>

<template>
  <div>
    <div class="backContent">
      <Row style="">
        <Col span="3" align="center">
          <Button icon="ios-add-circle" style="color:#1874CD" @click="createSample">创建标签</Button>
        </Col>
        <Col span="10">
          <Input placeholder="生成样品编号" v-model="sampleData.sample_code" disabled/>
        </Col>
        <Col span="3" align="center">
          <Button icon="ios-print" style="color:#1874CD" @click="print('1')">打印二维码</Button>
        </Col>
        <Col span="3" >
          <Button icon="ios-print" style="color:#1874CD" @click="print('2')">打印条形码</Button>
        </Col>
      </Row>
    </div>
    <div class="centerContent">
      <Row>
        <Col span="22">
          <span style="font-weight: bold">添加采样人员——已添加：</span><span style="color:#1874CD;font-weight: bold">{{dataList.length}}</span><span style="font-weight: bold">人</span>
        </Col>
      </Row>
    </div>
    <div class="footerContent">
      <Button icon="ios-search" style="width:165px;margin-right:20px;color:#1874CD" @click="inputIdCard">录入身份证</Button>
      <Button icon="ios-search" style="width:165px;color:#1874CD" @click="withIdCard">识别身份证</Button>
      <Row style="margin-top: 2%">
        <Col span="23">
          <Card>
            <Row>
              <Col span="4" align="center">
                <Select v-model="userInfoData.card_type" placeholder="请选择证件类型" filterable :disabled="inputState">
                  <Option v-for="obj in dicList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
                </Select>
              </Col>
              <Col span="4" align="center">
                <Input placeholder="证件编号" v-model="userInfoData.idcard" style="width: 94%" :disabled="inputState"/>
              </Col>
              <Col span="3" align="center">
                <Input placeholder="姓名" style="width: 94%" v-model="userInfoData.name" :disabled="inputState"/>
              </Col>
              <Col span="3" align="center">
                <Input placeholder="联系电话" style="width: 94%" v-model="userInfoData.mobile"/>
              </Col>
              <Col span="7" align="center">
                <Input placeholder="详细地址" v-model="userInfoData.address" style="width: 94%"/>
              </Col>
              <Col span="3">
                <Button icon="md-add-circle" style="color:#1874CD" @click="createSamplePerson">确定添加</Button>
              </Col>
              <Col span="4" v-if="message">
                <span style="font-size: 12px;color: red;">请在此处填入完整信息后点击添加</span>
              </Col>
            </Row>
          </Card>
          <Table :columns="columns" :data="dataList" style="margin-top: 2%"></Table>
        </Col>
      </Row>
    </div>
    <Modal v-model="updateModal" title="编辑信息" width="500">
      <Form>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">证件编号：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="updateData.card_no" disabled></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">姓名：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="updateData.name" disabled></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">联系电话：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="updateData.mobile"></Input>
          </Col>
        </Row>
        <Row class="bench_search">
          <Col span="7" class="ivu-form-item-label">详细地址：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="updateData.address"></Input>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="saveUpdate">保存</Button>
        <Button type="text" @click="updateModal = false">取消</Button>
      </div>
    </Modal>
    <Modal
      v-model="delModal"
      title="删除">
      是否确认删除？
      <div slot="footer">
        <Button type="text"  @click="delUser">确定</Button>
        <Button type="text" @click="delModal = false">取消</Button>
      </div>
    </Modal>
    <Modal v-model="qrcodeModal" title="二维码查看">
      <Row>
        <Col span="24" align="center">
          <div class="qrcode" ref="qrCodeUrl" id="srcdd"></div>
          <img id="barcode" />
        </Col>
      </Row>
    </Modal>
    <Modal v-model="faceStatus" title="人脸识别" width="700" @on-ok="faceStatus=false" @on-cancel="faceStatus=false">
      <face-comparison :isPlay="faceStatus" @img-result="imgResult"></face-comparison>
    </Modal>
    <wl-equipment :file-path="filePath" :file-name="fileName" v-model="deviceUserInfo" @change="changeCard" @change1="change"
                  :type="device_type" :is-open="openNow" ref="wlEquipment" @img-result="imgResult"></wl-equipment>
  </div>
</template>

<script>
import { createSample, createSamplePerson, getSamplePersonList, updateSamplePerson, deleteSamplePerson, getPersonInfoByCardno } from '@/api/nucleic-acid-detection'
import { idcard2 } from '@/api/idcard'
import { getDictList } from '@/api/common'
import WlEquipment from '@/components/wl-equipment/index'
import FaceComparison from '_c/face-comparison'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import JsBarcode from 'jsbarcode'
import { getLodop } from '../components/LodopFuncs'
export default {
  components: {
    WlEquipment,
    FaceComparison
  },
  data () {
    return {
      dicList: [],
      sampleData: {},
      dataList: [],
      userInfoData: {},
      inputState: true,
      controlData: {},
      userOverall: {},
      findInfo: {},
      device_type: '',
      filePath: '',
      fileName: 'photo.png',
      deviceUserInfo: {},
      openNow: false,
      faceStatus: false,
      updateModal: false,
      updateData: {},
      delModal: false,
      delData: {},
      qrcodeModal: false,
      message: false,
      imgData: '',
      barcodes: '',
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '证件编号',
          key: 'card_no',
          width: 200,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'mobile',
          width: 171,
          align: 'center'
        },
        {
          title: '详细地址',
          key: 'address',
          width: 420,
          align: 'center'
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'text', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.updateData = params.row
                    this.updateModal = true
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'text', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.delData = params.row
                    this.delModal = true
                  }
                }
              }, '删除')
            )
            return h('div', temp)
          }
        }
      ]
    }
  },
  watch: {
  },
  methods: {
    print (type) {
      if (this.sampleData.sample_code === undefined) {
        this.$Message.warning('请先创建标签')
        return
      }
      this.creatQrCode(this.sampleData.sample_code)
      // let LODOP = getLodop()
      // LODOP.PRINT_INIT('测试')
      // LODOP.ADD_PRINT_HTM(10, 55, '100%', '100%', this.imgData)
      // LODOP.PRINT_DESIGN()
      let LODOP = getLodop()
      var strBASE64Code1 = document.getElementById('srcdd').getElementsByTagName('img')[0].src
      // var strBASE64Code1 = document.getElementById('srcdd').src
      var strBASE64Code2 = document.getElementById('barcode').src
      if (strBASE64Code1 && strBASE64Code2) {
        LODOP.PRINT_INITA(3, 5, 800, 600, '')
        LODOP.SET_PRINT_PAGESIZE(1, 400, 300, '')
        LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '10.05mm')
        LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '10.05mm')
        LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true)
        if (type === '1') {
          LODOP.ADD_PRINT_SETUP_BKIMG(strBASE64Code1)
        } else {
          LODOP.ADD_PRINT_IMAGE('4mm', '-0.95mm', '40.01mm', '20.01mm', strBASE64Code2)
        }
        LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
        LODOP.SET_SHOW_MODE('BKIMG_PRINT', true)
        LODOP.SET_PREVIEW_WINDOW(0, 1, 0, 800, 600, '') // 打印前弹出选择打印机的对话框
        LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1) // 打印后自动关闭预览窗口
        // LODOP.PRINT_DESIGN()
        // LODOP.PRINT()
        LODOP.PREVIEW()
      } else {
        setTimeout(function () {
          console.log('base64未取到延时执行')
          console.log(strBASE64Code1, 'strBASE64Code1')
          console.log(strBASE64Code2, 'strBASE64Code2')
          LODOP.PRINT_INITA(3, 5, 800, 600, '')
          LODOP.SET_PRINT_PAGESIZE(1, 400, 300, '')
          LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '10.05mm')
          LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '10.05mm')
          LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true)
          if (type === '1') {
            LODOP.ADD_PRINT_SETUP_BKIMG(document.getElementById('srcdd').getElementsByTagName('img')[0].src)
          } else {
            LODOP.ADD_PRINT_IMAGE('4mm', '-0.95mm', '40.01mm', '20.01mm', document.getElementById('barcode').src)
          }
          LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
          LODOP.SET_SHOW_MODE('BKIMG_PRINT', true)
          LODOP.SET_PREVIEW_WINDOW(0, 1, 0, 800, 600, '') // 打印前弹出选择打印机的对话框
          LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1) // 打印后自动关闭预览窗口
          // LODOP.PRINT_DESIGN()
          // LODOP.PRINT()
          LODOP.PREVIEW()
        }, 1000)
      }
    },
    createSample () {
      createSample().then(ret => {
        if (ret.data.errcode === 0) {
          this.sampleData = ret.data.data
        } else {
          this.$Notice.error({
            title: '创建失败',
            desc: ret.data.errmsg
          })
        }
        // this.init()
      })
      document.getElementById('srcdd').innerHTML = ''
      document.getElementById('barcode').innerHTML = ''
    },
    createSamplePerson () {
      let param = {
        'sample_code': this.sampleData.sample_code,
        'card_no': this.userInfoData.idcard,
        'name': this.userInfoData.name,
        'mobile': this.userInfoData.mobile,
        'address': this.userInfoData.address
      }
      if (param.sample_code === undefined) {
        this.$Message.error('请创建标签后在进行添加人员')
        return
      }
      if (param.card_no === undefined || param.name === undefined || param.mobile === undefined || param.address === undefined) {
        this.$Message.error('请填写完整信息')
        return
      }
      createSamplePerson(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('添加人员成功')
          this.init()
          this.userInfoData = {}
          this.message = false
        } else {
          this.$Notice.error({
            title: '添加人员失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    getSamplePersonList () {
      let param = {
        'sample_code': this.sampleData.sample_code
      }
      getSamplePersonList(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = {}
          this.dataList = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询人员失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    inputIdCard () {
      this.inputState = false
      this.message = true
      this.userInfoData = {}
    },
    init () {
      if (this.$route.params.sample_code) {
        this.sampleData.sample_code = this.$route.params.sample_code
      }
      if (this.sampleData.sample_code !== undefined) {
        this.getSamplePersonList()
      } else {
        // console.log('11')
      }
    },
    showQrCode () {
      if (this.sampleData.sample_code !== undefined) {
        this.creatQrCode(this.sampleData.sample_code)
        this.qrcodeModal = true
      } else {
        this.$Message.warning('请先创建标签')
      }
    },
    creatQrCode (text) {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: text,
        top: 0,
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      JsBarcode('#barcode', text, {
        format: 'CODE128',
        lineColor: '#000',
        background: '#fff',
        width: 1,
        height: 20,
        fontSize: 14,
        displayValue: true
      })
      console.log(qrcode)
      console.log(document.getElementById('barcode'))
      console.log(document.getElementById('srcdd'))
      console.log(this.$refs.qrCodeUrl, 'qrcode')
    },
    createPicture () {
      html2canvas(this.$refs.qrCodeUrl, {
        backgroundColor: null,
        width: 1000,
        height: 1000
      }).then(canvas => {
        let imgData = canvas.toDataURL('image/jpeg')
        this.imgData = imgData
      })
    },
    saveUpdate () {
      let param = {
        'sample_code': this.updateData.sample_code,
        'card_no': this.updateData.card_no,
        'mobile': this.updateData.mobile,
        'address': this.updateData.address
      }
      updateSamplePerson(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('保存成功')
        } else {
          this.$Notice.error({
            title: '保存失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.updateModal = false
      })
    },
    delUser () {
      let param = {
        'sample_code': this.delData.sample_code,
        'card_no': this.delData.card_no
      }
      deleteSamplePerson(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('删除成功')
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
        this.init()
        this.delModal = false
      })
    },
    getPersonInfoByCardno (card_no) {
      getPersonInfoByCardno({ 'card_no': card_no }).then(ret => {
        if (ret.data.errcode === 0) {
          this.findInfo.name = ret.data.data.name
          this.findInfo.mobile = ret.data.data.mobile
          this.findInfo.address = ret.data.data.address
          if (this.findInfo.mobile) {
            let param = {
              'sample_code': this.sampleData.sample_code,
              'card_no': this.findInfo.idcard,
              'name': this.findInfo.name,
              'mobile': this.findInfo.mobile,
              'address': this.findInfo.address
            }
            createSamplePerson(param).then(ret => {
              if (ret.data.errcode === 0) {
                this.$Message.success('查找到现有数据，添加成功')
                this.init()
                this.userInfoData = {}
              } else {
                this.$Notice.error({
                  title: '添加人员失败',
                  desc: ret.data.errmsg
                })
              }
            })
          } else {
            this.$Message.warning('请补全信息')
          }
        } else if (ret.data.errcode === 10003) {
          this.$Message.warning('请补全信息')
        } else {
          this.$Notice.error({
            title: '查询人员失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    withIdCard () {
      if (this.sampleData.sample_code === undefined) {
        this.$Message.error('请创建标签后在进行添加人员')
        return
      }
      this.userInfoData = {}
      this.inputState = true
      this.idCard()
      // console.log(this.userOverall, '111111aaaa111111')
      // this.findInfo = this.userOverall
      // this.userInfoData = this.userOverall
      // console.log(this.findInfo, '2222222222')
    },
    idCard () {
      let that = this
      if (this.$store.state.user.severUserInfo.email === 'JieYuDevice') {
        that.readIDCard(function (idcardinfo) {
          that.controlData.photo = 'data:image/png;base64,' + idcardinfo.PhotoBmp
          that.userOverall.idcard = that.deviceUserInfo.idcard
          that.userOverall.name = idcardinfo.Name
          that.userOverall.address = idcardinfo.Address
          that.userOverall.sex = idcardinfo.Sex
          that.userOverall.folk = idcardinfo.Nation
          that.userOverall.card_type = '1'
        })
      } else {
        that.device_type = 'idcard'
        console.log(that.device_type, '类型哈哈哈哈')
        // that.$refs.wlEquipment.getResult()
        setTimeout(function () {
          console.log(that.deviceUserInfo.idcard, 'that.deviceUserInfo')
          that.controlData.photo = 'data:image/png;base64,' + that.deviceUserInfo.HeadPic
          that.userOverall.name = that.deviceUserInfo.name
          that.userOverall.idcard = that.deviceUserInfo.idcard
          that.userOverall.address = that.deviceUserInfo.address
          that.userOverall.sex = that.deviceUserInfo.sex
          that.userOverall.folk = that.deviceUserInfo.folk
          that.userOverall.card_type = '1'
        }, 1000)
        // that.device_type = ''
        setTimeout(function () {
          that.device_type = ''
        }, 1000)
      }
    },
    // 读取身份证信息
    readIDCard (callback) {
      let that = this
      idcard2().then(data => {
        let result = data.data
        if (result.code === 'SUCCESS') {
          callback(result.result)
        } else {
          that.$Message.warning(result.message)
        }
      }).catch(err => {
        that.$Message.warning('没有找到读卡设备')
        console.log(err, '错误信息')
      })
    },
    changeCard (data) {
      // this.controlData.photo
      this.deviceUserInfo.HeadPic = data.HeadPic
      this.userInfoData = data
      this.findInfo.idcard = data.idcard
      this.getPersonInfoByCardno(data.idcard)
    },
    change (data, base64) {
      this.imgUrl = data.base64
      this.is_photo = true
    },
    imgResult (idcard) {
      this.getUserInfo(idcard)
      this.faceStatus = false
    },
    settime () {
      let that = this
      setInterval(function () {
        that.init()
      }, 2000)
    },
    // 获取字典数据
    getDicInfo () {
      getDictList({ 'type': 'csc_squser_cardtype' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data.results
          console.log(this.dicList, '字典')
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    }
  },
  mounted () {
    this.getDicInfo()
    this.settime()
    this.init()
  }
}
</script>

<style>

</style>
